<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>Bootstrap导航案例</title>
</head>

<body>
    <div class="container">
        <ul class="nav nav-pills" id="mytab" role="tablist">
            <li class="active" role="presentation"><a href="#">home</a></li>
            <li role="presentation"><a href="#">about</a></li>
            <li role="presentation" class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    More <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Address</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Service</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Ativitity</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="container">
        <ul class="nav nav-pills nav-stacked" id="mytab2" role="tablist">
            <li class="active" role="presentation"><a href="#">home</a></li>
            <li role="presentation"><a href="#">about</a></li>
            <li role="presentation"><a>Contact</a></li>
        </ul>
    </div>
    <div class="container">
        <ul class="nav nav-pills nav-justified" id="mytab1" role="tablist">
            <li class="active" role="presentation"><a href="#">home</a></li>
            <li role="presentation"><a href="#">about</a></li>
            <li role="presentation" class="disabled"><a href="#">contact</a></li>
        </ul>
    </div>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $("#mytab a").click(function(e) {
            e.preventDefault();
            $(this).tab("show");
        })
        $("#mytab1 a").click(function(e) {
            e.preventDefault();
            $(this).tab("show");
        })
        $("#mytab2 a").click(function(e) {
            e.preventDefault();
            $(this).tab("show");
        })
    </script>
</body>

</html>